<template>
  <div class="user-center-wrapper">
    <header class="header">
      <div class="header-left">
        <img
          class="avatar"
          :src="
            user.Avatar
              ? 'https://' + user.Avatar
              : require('../assets/images/avatar.png')
          "
        />
      </div>
      <div class="header-center">
        <div>身份等级：{{ user.title }}</div>
        <div>学号：{{ user.studentId }}</div>
        <div class="with-icon">积分：{{ user.point }}</div>
      </div>
      <div class="header-right" @click="goPersonalInfo"></div>
    </header>
    <!-- <div class="common-row">
            <div class="common-row-left with-audition-icon">试听课程</div>
            <div @click="gotoHtml('shipin.html')" class="common-row-right with-arrow">马上试学一下</div>
        </div> -->
    <div class="tab-header">
      <div
        class="tab-label"
        :class="{ active: tabIndex === 2 }"
        @click="loadCause(2)"
      >
        <div>财务自由</div>
        <div>工具操作技能课</div>
      </div>
      <div
        class="tab-label"
        :class="{ active: tabIndex === 3 }"
        @click="loadCause(3)"
      >
        <div>财务自由</div>
        <div>财报分析技能课</div>
      </div>
      <div
        class="tab-label"
        :class="{ active: tabIndex === 4 }"
        @click="loadCause(4)"
      >
        <div>财务自由</div>
        <div>企业分析技能课</div>
      </div>
    </div>
    <div class="buy-lesson-wrapper" v-if="!courseLoaded"></div>
    <template v-else>
      <!-- <div class="buy-lesson-wrapper" v-if="courses.length===0">
                <div class="left">
                    <img src="../assets/images/usergoumai.png">
                </div>
                <div class="center">
                    <div class="buy-msg">您还未购买本课程<span>限时优惠</span></div>
                    <div class="sub-msg">购买后可进行学习</div>
                </div>
                <div class="right">
                    <div class="buy-btn">立即购买</div>
                </div>
            </div> -->
      <template v-if="courses.length > 0">
        <div class="common-row">
          <div class="common-row-left with-question-icon">答题系统</div>
          <div
            class="common-row-right with-arrow lightgray"
            @click="goQuestionList"
          >
            立即进入
          </div>
        </div>
        <div class="common-row">
          <div class="common-row-left with-micromsg-icon">添加专属导师</div>
          <div
            class="common-row-right with-arrow lightgray"
            @click="gotoClassRoom()"
          >
            {{ classroom.title || "添加导师" }}
          </div>
        </div>
      </template>
    </template>
    <div class="tab-content-wrapper">
      <div class="lesson-category">
        <!-- <div class="title">{{category.name}}</div> -->
        <ol class="lists">
          <template v-for="(chapter, i) of chapters">
            <li
              :key="chapter.id"
              @click="onChapterClick(chapter, i === 0)"
              :class="{ 'can-learn': chapter.canLearn || true }"
            >
              <div>
                <span>{{ chapter.title }}</span>
                <span v-if="chapter.canTryOut" class="try-out">试看</span>
                <img
                  src="../assets/images/qkbflist.png"
                  v-if="chapter.hasSubLessons"
                  class="arrow"
                  :class="{ down: chapter.showChild }"
                />
              </div>
              <div v-if="chapter.minLesson === null" v-show="chapter.showChild">
                <ol class="lists" v-if="chapter.children.length > 0">
                  <li
                    v-for="subchapter of chapter.children"
                    :class="{ 'can-learn': subchapter.canLearn || true }"
                    @click.stop="onChapterClick(subchapter, false)"
                    :key="subchapter.id"
                  >
                    <div>
                      <span>{{ subchapter.title }}</span>
                      <span v-if="subchapter.canTryOut" class="try-out"
                        >试看</span
                      >
                    </div>
                  </li>
                </ol>
                <span v-else>暂无课程</span>
              </div>
            </li>
          </template>
        </ol>
        <div class="no-course" v-if="chapters.length === 0">暂无课程</div>
      </div>
    </div>
    <footer>
      <a href="https://www.qianduoduocaishang.com/qddhome/index.html">
        <img src="../assets/images/n1.png" alt="" />
        <span class="act">首页</span>
      </a>
      <a class="active">
        <img src="../assets/images/n2_hover.png" alt="" />
        <span class="act">我的</span>
      </a>
    </footer>
  </div>
</template>

<script>
import {login, getUserInfo, getUserId, getClassroom, getChapterList, getCourses} from '@/assets/js/api';
export default {
  computed: {
    chapters() {
      return this.tabs[this.tabIndex];
    }
  },
  data() {
    return {
      // userId: localStorage.userId,
      userId: this.$route.query.id,
      tabIndex: 2,
      tabs: {
        2: [],
        3: [],
        4: []
      },
      courses: [],
      courseLoaded: false,
      user: {},
      classroom: {}
    };
  },
  mounted() {
    let tokenId = this.$route.query.id;
    if (!tokenId) {
      this.reLogin();
    } else {
      getUserId(tokenId).then(userId => {
        this.userId = userId;
        localStorage.userId = this.userId;
        getUserInfo(this.userId, false).then(data => {
          this.user = data;
          localStorage.userInfo = JSON.stringify(data);
          getCourses(this.userId, false).then(data => {
            this.courses = data[1];
            this.courseLoaded = true;
            this.loadCause(2);
          });
          getClassroom(this.userId, false).then(data => {
            this.classroom = data || {};
          });
        });
      }, () => {
        this.reLogin();
        // getUserInfo(this.userId, false).then(data => {
        //     this.user = data;
        //     localStorage.userInfo = JSON.stringify(data);
        //     getCourses(this.userId, false).then(data => {
        //         this.courses = data[1];
        //         this.courseLoaded = true;
        //         this.loadCause(2);
        //     });
        //     getClassroom(this.userId, false).then(data => {
        //         this.classroom = data || {};
        //     });
        // });
      });
    }
  },
  methods: {
    reLogin() {
      return login().then(url => {
        window.location.href = url;
      });
    },
    loadCause(index) {
      return getChapterList(index).then(data => {
        let chapters = data.map((o, i) => {
          let chapter = {
            ...o,
            hasSubLessons: o.minLesson === null,
            showChild: false,
            buyed: this.courses.includes(9) || this.courses.includes(o.courseId)
          };
          chapter.canTryOut = !chapter.buyed && i === 0 && chapter.isTry;
          if (index === 2 && i === 0) {
            chapter.canLearn = true;
          } else if (+chapter.minLesson <= +(this.user[`higherProgress${index - 1}`])) {
            chapter.canLearn = true;
          } else if (index > 2 && this.user[`higherProgress${index - 1}`] === '999') {
            chapter.canLearn = true;
          } else {
            chapter.canLearn = false;
          }
          return chapter;
        });
        console.log(chapters);

        this.tabs[index] = chapters.filter(o => o.parentId + '' === '0').map(o => ({
          ...o,
          children: chapters.filter(d => d.parentId === o.id)
        }));
        this.tabIndex = index;
      });
    },
    goPersonalInfo() {
      this.$router.push({
        name: 'personalInfoList'
      });
    },
    goQuestionList() {
      this.$router.push({
        name: 'qaList'
      });
    },
    gotoClassRoom() {
      if (!this.classroom.id) {
        window.location.href = 'https://www.qianduoduocaishang.com/qddhome/selectdate.html';
      } else {
        window.location.href = 'https://www.qianduoduocaishang.com/qddhome/jinjieClass/classcode.html';
      }
    },
    gotoHtml(pageName) {
      window.location.href = `./static/html/${pageName}`;
    },
    onChapterClick(chapter, isFirstChapter = false) {
      if (chapter.minLesson === null) {
        chapter.showChild = !chapter.showChild;
      } else {
        this.goTryOut(chapter, isFirstChapter);
      }
    },
    goTryOut(chapter, isFirstChapter = false) {
      if (!chapter.buyed && !chapter.canTryOut) {
        this.$toast('您没有购买此课程！');
        return;
      }
      if (!chapter.canLearn) {
        this.$toast('您必须学完前面的章节才能学习这个章节！');
        return;
      }
      this.$router.push({
        name: 'tryOut',
        query: {
          chapterId: chapter.id,
          courseId: this.tabIndex,
          chapterTitle: chapter.title,
          isFirstChapter: isFirstChapter
        }
      });
    }
  },
  components: {
  }
};
</script>
<style lang="less" scoped>
.user-center-wrapper {
  background: #eee;
  min-height: 100%;
  padding-bottom: 110px;
  .header {
    display: flex;
    height: 210px;
    background: linear-gradient(0deg, #416bea 0%, #4c85f3 100%);
    .header-left {
      display: flex;
      width: 190px;
      justify-content: center;
      align-items: center;
      .avatar {
        height: 120px;
        width: 120px;
        border-radius: 50%;
      }
    }
    .header-center {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: center;
      color: #fff;
      font-size: 26px;
      .with-icon {
        background: url(../assets/images/userjifen.png) no-repeat left center;
        background-size: 27px 27px;
        padding-left: 40px;
      }
    }
    .header-right {
      width: 140px;
      background: url(../assets/images/usershezhi.png) no-repeat center center;
      background-size: 60px 60px;
    }
  }
  .common-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 40px;
    height: 120px;
    background: #fff;
    > div {
      font-size: 28px;
      &.common-row-left {
        color: #000;
        font-weight: 600;
        width: 400px;
        &.with-audition-icon {
          background: url(../assets/images/usershitingimg.png) no-repeat left
            center;
          background-size: 32px 40px;
          padding-left: 60px;
        }
        &.with-question-icon {
          background: url(../../static/images/question.png) no-repeat left
            center;
          background-size: 32px 40px;
          padding-left: 60px;
          font-size: 34px;
        }
        &.with-micromsg-icon {
          background: url(../../static/images/micromsg.png) no-repeat left
            center;
          background-size: 48px 38px;
          padding-left: 60px;
          font-size: 34px;
        }
      }
      &.common-row-right {
        color: blue;
        font-size: 28px;
        word-break: break-all;
        &.with-arrow {
          background: url(../assets/images/qkbflist.png) no-repeat right center;
          background-size: 13px 25px;
          padding-right: 40px;
        }
        &.lightgray {
          color: #a4a4a4;
        }
      }
    }
  }
  .tab-header {
    display: flex;
    padding-top: 40px;
    height: 120px;
    background: #fff;
    > .tab-label {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      flex: 1;
      height: 120px;
      font-size: 28px;
      &.active {
        color: #427ae4;
        position: relative;
        &::after {
          content: "";
          position: absolute;
          bottom: 0;
          height: 8px;
          width: 80px;
          background: #427ae4;
          border-radius: 8px;
        }
      }
    }
  }
  .buy-lesson-wrapper {
    display: flex;
    height: 160px;
    align-items: center;
    background: #fff;
    .left {
      width: 100px;
      padding: 0 30px;
      display: flex;
      img {
        width: 100px;
        height: 100px;
      }
    }
    .center {
      flex: 1;
      .buy-msg {
        font-size: 34px;
        display: flex;
        align-items: center;
        font-weight: 500;
        > span {
          font-size: 24px;
          margin-left: 10px;
          padding: 0 10px;
          border: 1px solid #fb8787;
          background: #fb8787;
          color: #fff;
          border-radius: 10px;
        }
      }
      .sub-msg {
        font-size: 28px;
      }
    }
    .right {
      width: 160px;
      .buy-btn {
        width: 130px;
        height: 50px;
        line-height: 50px;
        border: 1px solid #768dde;
        border-radius: 25px;
        color: #768dde;
        text-align: center;
        font-size: 24px;
      }
    }
  }
  .tab-content-wrapper {
    margin-top: 6px;
    background: #fff;
    min-height: 100vh;
    .lesson-category {
      padding: 0 40px;
      .title {
        height: 148px;
        line-height: 148px;
        font-size: 34px;
        font-weight: 550;
      }
      .lists {
        list-style: decimal-leading-zero;
        padding-left: 50px;
        > li {
          color: #aaa;
          font-size: 24px;
          &:not(:last-child) > div {
            border-bottom: 1px solid #eee;
          }
          &.can-learn {
            color: #000;
          }
          > div {
            position: relative;
            min-height: 110px;
            line-height: 110px;
            font-size: 28px;
            > .try-out {
              height: 30px;
              line-height: 30px;
              font-size: 24px;
              border-radius: 15px;
              border: 1px solid #fb8787;
              padding: 2px 10px;
              color: #fb8787;
              margin-left: 20px;
            }
            > .arrow {
              width: 13px;
              height: 25px;
              position: absolute;
              right: 0;
              top: 44px;
              transition: transform 0.2s ease-in;
              transform-origin: center center;
              &.down {
                transform: rotate(90deg);
              }
            }
          }
        }
      }
      .no-course {
        line-height: 120px;
        text-align: center;
        font-size: 30px;
        color: #aaa;
      }
    }
  }
  footer {
    background: #fff;
    display: flex;
    justify-content: space-around;
    align-items: center;
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    height: 110px;
    border-top: 1px solid #eee;
    a {
      display: flex;
      flex-direction: column;
      align-items: center;
      color: #454545;
      img {
        width: 50px;
      }
      span {
        font-family: PingFangSC-Regular;
        font-size: 28px;
        letter-spacing: 0;
      }
    }
  }
}
</style>
